<html>
  <body>

    <div id="triangle">

    </div>

    <div id="up"></div>

    <div class="first"></div>
    <div class="second"></div>

  </body>
  

<style>
    #triangle{
        width: 0;
        height: 0;
        border: 100px solid;
        border-color: orangered skyblue gold yellowgreen;
    }
    
    #up{
        width: 0;
        height: 0;
        border-top: 100px solid transparent; 
        border-right: 100px solid transparent;
        border-left: 100px solid transparent;
        border-bottom: 100px solid orangered;
    }

    .first{
      width: 400px;
      height: 20px;
      background: linear-gradient(45deg, deeppink, yellowgreen);
    }
    .second{
      width: 500px;
      height: 20px;
      background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
    }

</style>


</html>